<template>

	<view class="top-content">
		<view class="content-title">
			<picker class="picker" @change="bindPickerChange" :value="index" :range="jcList" range-key="name">
				<view class="uni-input">{{jcList[index] && jcList[index].name}}</view>
			</picker>
		</view>
		<uni-search-bar @confirm="search" v-model="keywords" clearButton="auto" cancelButton="none"
			placeholder="请输入案由关键词/提案人进行搜索" class="search-bar"></uni-search-bar>
	</view>

	<scroll-view style="height: calc(100% - 162px - var(--status-bar-height));" scroll-y="true" @scrolltolower="lowerBottom">
		<uni-list v-show="data.length > 0">
			<uni-list-item direction="row" v-for="item in data" :key="item.id"
				:to="`/pages/resumption/proposalDetail?id=${item.id}`">
				<template v-slot:body>
					<view class="uni-list-box uni-content">
						<view class="title uni-ellipsis-2">
							{{item.title}}<span v-if="item.status_text && item.status_text != ''">【{{item.status_text}}】</span>
						</view>
						<view class="date">
							{{item.createtime_text}}
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="showLoad" :status="loadStatus" />
		<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data"
			v-if="loadStatus == 'no-more' && data.length == 0"></image>
	</scroll-view>
</template>

<script>
	import request from '../../common/request.js'
	export default {
		components: {

		},
		data() {
			return {
				data: [],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
				keywords: '',
				index: 0,
				jcList: [],
				jcId: ''
			}
		},
		mounted() {
			this.getListData()
			this.getDataList()
		},
		methods: {
			bindPickerChange(e, type) {
				this.index = e.detail.value
				this.data = []
				this.jcId = this.jcList[this.index].id
				this.getListData()
			},
			getDataList() {
				request({
					url: '/proposal/dataList',
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.jcList = res.data[0] && res.data[0].jcList
						this.jcId = this.jcList[0].id
					}
				})
			},
			search(res) {
				this.data = []
				this.getListData()
			},
			lowerBottom() {
				if (this.loadStatus != 'loading') {
					this.loadStatus = 'loading'
					this.showLoad = true
					this.page++
					this.getListData()
				}
			},
			getListData() {
				request({
					url: '/proposal/tianList',
					data: {
						page: this.page,
						category: 3, // 1我的，2草稿，3公开
						keywords: this.keywords,
						jc: this.jcId
					},
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.data = this.data.concat(res.data)
						if (this.page == res.lastPage || res.lastPage == 0) {
							this.loadStatus = 'no-more'
						} else {
							this.loadStatus = 'more'
							this.showLoad = false
						}
					} else {
						this.loadStatus = 'no-more'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-content {
		background-color: #2668be;
		color: #fff;
		padding: 15px 10px;
		text-align: center;

		.content-title {
			border-bottom: 1px solid #fff;
			display: inline-block;
			padding: 20px 15px 15px;
			margin-bottom: 10px;
		}

	}

	::v-deep .uni-searchbar__box {
		text-align: left;
		background-color: rgba(255, 255, 255, 0.4) !important;
		height: 45px;

		.uni-input-input,
		.uni-icons {
			color: #fff !important;
		}

		.uni-searchbar__text-placeholder,
		.uni-input-placeholder {
			color: #f2f6fb;
		}
	}


	.title span,
	.title label {
		color: #fb7a30;
	}
</style>